<template>
  <TresPerspectiveCamera :position="cameraPosition" :look-at="[0, 0, 1]" />
  <TresAmbientLight :intensity="0.5" color="white" />
  <TresMesh ref="boxRef" :position="[0, 2, 0]">
    <TresBoxGeometry :args="[1, 1, 1]" />
    <TresMeshNormalMaterial />
  </TresMesh>
  <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
  <TresAxesHelper />
  <TresGridHelper :args="[10, 10]" />
</template>
<script setup lang="ts">
import type { TresObject } from '@tresjs/core'
import { useLoop } from '@tresjs/core'
import { shallowRef ,onMounted,ref} from 'vue'

const { onBeforeRender } = useLoop()

const boxRef = shallowRef<TresObject | null>(null)

onBeforeRender(({ elapsed }: any) => {
  if (boxRef.value) {
    // console.log('elapsed', elapsed)
    boxRef.value.rotation.y = elapsed
    boxRef.value.rotation.z = elapsed
    boxRef.value.rotation.x = elapsed
  }
})


const cameraPosition = ref([10,10,10])

onMounted(() => {
  window.addEventListener('keydown', (event) => {
    console.log('keydown', event.key)
    if (event.key === 'ArrowRight' && boxRef.value) {
      // cameraPosition.value[0] += 30
      const [x, y, z] = cameraPosition.value
      cameraPosition.value = [x + 1, y, z]
    }
  })
})

</script>
